
import logo from '../assets/images/logo.png';
import { useMediaQuery } from 'react-responsive';
import '../assets/styles/Login.css';
import {login} from "../api/login.ts";
import {useEffect, useState} from "react";
import {Auth} from "../type/Auth.ts";
import { Button } from 'antd';

const Login = () => {
    const [loading, setLoading] = useState(false);
    const isDesktopOrLaptop = useMediaQuery({ query: '(min-width: 1224px)' });
    const isTabletOrMobile = useMediaQuery({ query: '(max-width: 1223.98px)' });
    useEffect(() => {
        localStorage.clear();//清除缓存
        return () => {
        }
    }, []);
    const authorize=()=>{
        setLoading(true);
        login().then(response=>{
            // console.log(response)
            //重定向的地址,/auth/callback
            const url=response.data.res;
            // //下次请求要带上
            const state=response.data.state;
            localStorage.setItem(Auth.STATE,state);
            window.location.href=url;
            setLoading(false);
        })
    };
    return (
        <div className={`login-container ${isDesktopOrLaptop ? 'desktop' : 'mobile'}`}>
            <div className="login-form">
                <img src={logo} alt="Jing" className="login-logo" />
                <div className="login-tabs">
                    <span className="active-tab">验证码登录</span>
                    <span>密码登录</span>
                </div>
                <p className="login-note">您所在地区仅支持手机号/微信/邮箱登录</p>
                <input type="text" placeholder="+86 请输入手机号" className="login-input" />
                <div className="verification-container">
                    <input type="text" placeholder="请输入验证码" className="login-input-1" />
                    <button className="send-verification">发送验证码</button>
                </div>
                <div className="terms-container">
                    <input type="checkbox" />
                    <span>
            我已阅读并同意
            <a href="#">用户协议</a>与
            <a href="#">隐私政策</a>，未注册的手机号将自动注册
          </span>
                </div>
                <button className="login-button">登录</button>
                <div className="or-divider">
                    <span>或</span>
                </div>
                <Button className="login-button" onClick={authorize} loading={loading}>
                    <img src={logo} alt="COZE Icon" />
                    使用COZE平台账号登录
                </Button>
            </div>
        </div>
    );
};

export default Login;

